import 'package:flutter/material.dart';
import '../utils/adapt.dart';
import '../utils/request.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';

class SideListViewMenu extends StatefulWidget {
  @override
  _SideListViewMenuState createState() => _SideListViewMenuState();
}

class _SideListViewMenuState extends State<SideListViewMenu>
    with AutomaticKeepAliveClientMixin {
  var _menuStr = ["华语", "欧美", "韩国", "日本"];
  int _selectedIdx = 0;
  final _menuHeight = Adapt.px(100);
  final _menuWidth = Adapt.px(200);
  List _dataList1 = [];
  List _dataList2 = [];
  List _dataList3 = [];
  List _dataList4 = [];
  void _getData(type) async {
    // 1: 华语
    // 2: 欧美
    // 3: 韩国
    // 4: 日本
    EasyLoading.show(status: 'loading...');
    var res = await getHttp('/toplist/artist?type=${type}');
    EasyLoading.dismiss();
    var _list = res['list']['artists'];
    if (type == 1) {
      this.setState(() {
        _dataList1 = _list;
      });
    } else if (type == 2) {
      this.setState(() {
        _dataList2 = _list;
      });
    } else if (type == 3) {
      this.setState(() {
        _dataList3 = _list;
      });
    } else if (type == 4) {
      this.setState(() {
        _dataList4 = _list;
      });
    }
  }

  void _clickTapGetData(index) {
    if (index == 0) {
      if (_dataList1.length == 0) {
        _getData(1);
      }
    } else if (index == 1) {
      if (_dataList2.length == 0) {
        _getData(2);
      }
    } else if (index == 2) {
      if (_dataList3.length == 0) {
        _getData(3);
      }
    } else if (index == 3) {
      if (_dataList4.length == 0) {
        _getData(4);
      }
    }
  }

  @override
  void initState() {
    // _menuStr = new List<String>.generate(20, (i) => "menu $i");
    super.initState();
    _getData(1);
  }

  _createList<Widget>(_list) {
    return ListView.separated(
      itemCount: _list.length,
      separatorBuilder: (BuildContext context, int index) {
        return Divider(height: 1, color: Colors.grey);
      },
      itemBuilder: (BuildContext context, int index) {
        return ListTile(
          onTap: () {
            Navigator.pushNamed(context, '/singer', arguments: {
              "name": _list[index]['name'],
              "picUrl": _list[index]['picUrl'],
              "id": _list[index]['id']
            });
          },
          leading: Image.network(_list[index]['img1v1Url'] + '?param=100y100'),
          title: Text(_list[index]['name']),
          trailing: Icon(Icons.list),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('全部歌手榜'),
      ),
      body: Row(
        children: <Widget>[
          Container(
            width: _menuWidth,
            color: Colors.blue[50],
            child: ListView.builder(
              itemCount: _menuStr.length,
              itemBuilder: (context, index) {
                String str = _menuStr[index];
                return GestureDetector(
                  onTap: () {
                    _clickTapGetData(index);
                    setState(() {
                      _selectedIdx = index;
                    });
                  },
                  child: Column(
                    children: <Widget>[
                      Container(
                        height: _menuHeight,
                        color: (_selectedIdx == index)
                            ? Colors.grey
                            : Colors.white,
                        child: Row(
                          children: <Widget>[
                            Container(
                              width: Adapt.px(10),
                              height: _menuHeight,
                              color: (_selectedIdx == index)
                                  ? Colors.yellowAccent
                                  : Colors.white,
                            ),
                            Expanded(
                              child: Center(
                                child: Text(str),
                              ),
                            )
                          ],
                        ),
                      ),
                      Container(
                        height: 1,
                        color: Colors.blueGrey,
                      )
                    ],
                  ),
                );
              },
            ),
          ),
          Expanded(
              child: IndexedStack(
            index: _selectedIdx,
            children: [
              _createList(_dataList1),
              _createList(_dataList2),
              _createList(_dataList3),
              _createList(_dataList4),
            ],
          ))
        ],
      ),
    );
  }

  @override
  // TODO: implement wantKeepAlive
  bool get wantKeepAlive => true;
}
